<template>
	<view class="pad20">
		<view class="mt20">
			<text>投诉工单信息</text>
		</view>
		<view class="cu-list menu">
			<view class="cu-item">
				<view class="content flexR-FS-C">
					<i class="iconfont text-green mr10">&#xe6e3;</i>
					<text class="text-grey">投诉编码</text>
				</view>
				<view class="action">
					<text class="text-grey text-sm">{{complaint.complaintId}}</text>
				</view>
			</view>
			<view class="cu-item">
				<view class="content flexR-FS-C">
					<i class="iconfont text-green mr10">&#xe632;</i>
					<text class="text-grey">类型</text>
				</view>
				<view class="action">
					<text class="text-grey text-sm">{{complaint.typeName}}</text>
				</view>
			</view>
			<view class="cu-item">
				<view class="content flexR-FS-C">
					<i class="iconfont text-green mr10">&#xe638;</i>
					<text class="text-grey">投诉人</text>
				</view>
				<view class="action">
					<text class="text-grey text-sm">{{complaint.complaintName}}</text>
				</view>
			</view>
			<view class="cu-item">
				<view class="content flexR-FS-C">
					<i class="iconfont text-green mr10">&#xe619;</i>
					<text class="text-grey">投诉电话</text>
				</view>
				<view class="action">
					<text class="text-grey text-sm">{{complaint.tel}}</text>
				</view>
			</view>
			<view class="cu-item">
				<view class="content flexR-FS-C">
					<i class="iconfont text-green mr10">&#xe8b8;</i>
					<text class="text-grey">投诉时间</text>
				</view>
				<view class="action">
					<text class="text-grey text-sm">{{complaint.createTime}}</text>
				</view>
			</view>
			<view class="cu-item">
				<view class="content">
					<view class="flexR-FS-C">
						<i class="iconfont text-green mr10">&#xe889;</i>
						投诉内容
					</view>
					<view class="text-gray mt20">
						{{complaint.context}}
					</view>
				</view>
			</view>

			<view class="cu-item" v-if="complaint.photos && complaint.photos.length > 0">
				<view class="mt20 grid text-center col-3 grid-square">
					<view class="" v-for="(_item,index) in complaint.photos" :key="index">
						<image mode="scaleToFill" :data-url="_item.url" :src="_item.url" @tap="preview(index)"></image>
					</view>
				</view>
			</view>

		</view>

		<view class="mt60">
			<view class="cu-time">工单进度</view>
			<uni-steps :options="audits" direction="column" :active="0"></uni-steps>
		</view>
	</view>
</template>


<script>
	export default {
		data() {
			return {
				complaint: {
					complaintId: '1756453123453212',
					tel: '13266668888',
					typeName: '房屋设施投诉',
					complaintName: '吴鑫',
					createTime: '2024-12-22 15:32:33',
					context: '27号楼503一大早装修吵死了',
				},

				audits: [{
					desc: '2024-12-23 11:22:40',
					title: '李勇进：感谢理解',
				}, {
					desc: '2024-12-23 08:11:56',
					title: '吴鑫：多谢',
				}, {
					desc: '2024-12-22 16:01:13',
					title: '李勇进：已上门沟通，同意错峰装修',
				}, {
					title: '吴鑫： 27号楼503一大早装修吵死了',
					desc: '2024-12-22 15:32:33'
				}]
			}
		},
		methods: {

		}
	}
</script>

<style lang="scss" scoped>
	@import "./css/list.scss";
</style>